<template>
  <div v-if="dataRecord&&dataRecord.length>0">
    <h5 align="center">{{dataRecord[0].name}}</h5>
    <div v-html="dataRecord[0].content"></div>
    <div display="block">
      <Button v-if="!dataRecord[0].websitePublished" icon="browsing-history" type="info"
              @click="onUpdate({website_published:true})">发布
      </Button>
      <Button v-if="dataRecord[0].websitePublished" icon="closed-eye" type="info"
              @click="onUpdate({website_published:false})">撤回
      </Button>
      <Button icon="delete" type="info" @click="onUnlink()">删除</Button>
    </div>
  </div>
</template>

<script>
  import gql from 'graphql-tag'
  import {Button, Col, Form, Row} from "vant"
  // Vue.use(Checkbox)
  export default {
    name: 'Article',
    components: {
      vanForm: Form, Row, Col, Button
    },
    data: function () {
      return {
        dataRecord: null,
        context: {},
        recordValue: [],
        id: null,
        doEdit: false,
        result: {},
        otherFields: [],
        website: false,
        seo: false,
        rating: false,
        mail: false
      }
    },
    computed: {
      change() {
        if (this.recordValue) {
          for (let fieldName of this.recordValue) {
            let field = Object.values(fieldName)[0]
            if (field.change) {
              return true
            }
          }
        }
        return false
      }
    },
    watch: {
      $route(to, from) {
        if (to.name === 'Article') {
          if (to.params.id > 0) this.id = parseInt(to.params.id)
          else this.id = 0
          this.$apollo.queries.dataRecord.refetch()
          console.log('route changed')
        }
      }
    },

    mounted: function () {
      if (this.$route.params.id > 0) this.id = parseInt(this.$route.params.id)
      else this.id = 0

    },
    apollo: {
      dataRecord() {
        return {
          query: gql`query qdv($id:Int!){
                   dataRecord:allContentContent(id:$id){
                   name
            content
            websitePublished
          }
         }`,
          variables() {
            return {
              id: this.id,
            }
          },
          skip() {
            return !this.id
          }
        }
      }
    },
    methods: {
      onUpdate: function (writeDict) {
        let self = this
        this.$apollo.mutate({
          mutation: gql`mutation($id:Int!,$value:JSON!){
  writeRecord(id:$id,model:"content.content",value:$value){
    ok
  }
}`,
          variables: {id: this.id, value: writeDict}
        })
          .then(function (response) {
            if (response && response.data.writeRecord.ok) {
              self.$router.back()
            } else if (response && !response.data.writeRecord.ok) {
              // self.app_root.toast(response.result.errMsg)
            }
          })
          .catch(function (error) {
            console.log(error, __filename)
          })
      },
      onUnlink(item) {
        let self = this
        console.info(item)
        Dialog.confirm({
          title: '删除记录',
          message: `确认删除${this.dataRecord[0].name}?`,
        })
          .then(() => {
            this.$apollo.mutate({
              mutation: gql`mutation($model:String!,$id:Int!){
              unlinkRecord(model:$model,id:$id){
                ok
              }
            }`,
              variables: {model: "content.content", id: this.id}
            }).then(
              function () {
                self.$router.back()
              },
              function () {
              }
            )
          })
          .catch(() => {
            // on cancel
          });
      },
      onCancel() {
        this.$router.back()
      }
    }
  }
</script>
